<template>
  <view class="join">
    <view class="container">
      <image src="@/static/join/join.png" class="img" />
      <view class="title">我们的服务 </view>
      <view class="bar"> </view>
      <view class="server-list" v-for="(item, index) in servist" :key="index">
        <view class="us-server">{{ index + 1 }} </view>
        <view> {{ item.name }}</view>
      </view>
      <view class="tip">
         请联系班主任 申请开通测评， 快来加入我们吧！
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      servist: [
        {
          name: "提供每月一次综合健康测试",
        },
        {
          name: "儿童健康数据档案管理服务",
        },
        {
          name: "每月实时更新健康数据",
        },
        {
          name: "每日更新儿童在园健康监测数据",
        },
      ],
    };
  },
  methods: {},
};
</script>

<style scoped lang ='scss' >
.join {
  height: 100vh;
  background-color: #f7f7f7;
  padding: 40rpx;
  .container {
    background-color: #ffffff;
    height: 85vh;
    border-radius: 20rpx;
    text-align: center;
    .img {
      width: 442rpx;
      height: 370rpx;
      margin-top: 40rpx;
    }
    .title {
      font-size: 36rpx;
      font-weight: bold;
      color: #07c390;
      margin-top: 60rpx;
      z-index: 300;
    }
    .bar {
      height: 24rpx;
      width: 202rpx;
      background-color: #cdf3e9;
      margin: -24rpx auto;
      margin-bottom: 30rpx;
    }
    .server-list {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      width: 60vw;
      margin: 33rpx auto;

      & > view:nth-child(2) {
        font-size: 28rpx;
        color: #000000;
        font-weight: Regular;
      }
      .us-server {
        background-image: url("@/static/join/circle.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 36rpx;
        height: 33rpx;
        color: #ffffff;
        font-size: 20rpx;
        line-height: 33rpx;
        margin-right: 10rpx;
      }
    }
    .tip {
      background-color: #07c390;
      color: #ffffff;
      text-align: center;
      margin: 43.5 * 2rpx;
      padding: 18.5 * 2rpx 43 * 2rpx;
      border-radius: 20rpx;
      font-size: 28rpx;
    }
  }
}
</style>
